<template>
  <div class="device-container view-content-box">
    <div class="type-list">
      <div class="device-type">
        <div class="num">{{ detail.totalNum }}</div>
        <div class="type">我的设备(台)</div>
      </div>
      <div class="device-type">
        <div class="num">{{ detail.abnormalNum }}</div>
        <div class="type">设备异常信息(条)</div>
      </div>
    </div>
    <div class="add-btn" @click="router.push({ path: '/device/add' })">
      添加设备
    </div>
    <LoadList :loadingData="postMpDevicePage" class="view-content">
      <template #list="{ list }">
        <div class="device-list">
          <div v-for="(item, index) in list" :key="item.id || index">
            <img :src="item.image" alt="" />
            <div class="name">{{ item.name }}</div>
            <div class="code">{{ item.code }}</div>
            <!-- <div class="use-list">
              <div class="all-item">
                <span>洗发水</span>
                <div
                  :class="['use-item', item.hampoo < 100 && 'radius']"
                  :style="{ width: `${item.hampoo}%` }"
                ></div>
              </div>
              <div class="all-item">
                <span>护发素</span>
                <div
                  :class="['use-item', item.conditioner < 100 && 'radius']"
                  :style="{ width: `${item.conditioner}%` }"
                ></div>
              </div>
              <div class="all-item">
                <span>养发液</span>
                <div
                  :class="['use-item', item.hairtonic < 100 && 'radius']"
                  :style="{ width: `${item.hairtonic}%` }"
                ></div>
              </div>
            </div> -->
            <div class="d-flex px-8 j-sb a-center mt-24">
              <div class="status">
                <span :class="['mr-16', item.onlineStatus != 1 && 'error']">{{
                  item.onlineStatus == 0 ? "在线" : "离线"
                }}</span>
                <span :class="[item.status != 1 && 'error']">{{
                  item.useStatus == 0 ? "正常" : "异常"
                }}</span>
              </div>
              <div
                class="view"
                @click="
                  router.push({
                    path: '/device/detail',
                    query: { id: item.id },
                  })
                "
              >
                查看 <van-icon name="arrow" class="ri-icon" />
              </div>
            </div>
          </div>
        </div>
      </template>
    </LoadList>
    <!-- <van-empty v-else description="暂无数据" /> -->
  </div>
</template>

<script setup>
import { postMpDeviceStatistics, postMpDevicePage } from "@/api/index";
import { onMounted } from "vue";
const router = useRouter();
const detail = ref({
  deviceNum: "112",
  errorNum: "112",
});
// const list = ref([]);
const getStatistics = () => {
  postMpDeviceStatistics().then((res) => {
    console.log(res);
    detail.value = res.data;
  });
};
// const getList = () => {
//   postMpDevicePage({
//     current: 1,
//     size: 100,
//   }).then((res) => {
//     list.value = res.data.records;
//     console.log(res);
//   });
// };
onMounted(() => {
  getStatistics();
  // getList();
});
</script>

<style lang="less" scoped>
.device-container {
  padding: 40px 20px;
}
.type-list {
  display: flex;
  gap: 20px;
  > .device-type {
    flex: 1;
    // height: 250px;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    &:first-child {
      background: #b5d4ff;
    }
    &:last-child {
      background: #fedc00;
    }
    .num {
      font-size: 46px;
      font-weight: 600;
      margin-bottom: 24px;
    }
    .type {
      font-size: 30px;
    }
  }
}
.add-btn {
  width: 100%;
  height: 70px;
  line-height: 70px;
  text-align: center;
  background: #fff;
  border-radius: 30px;
  color: #000;
  font-size: 32px;
  margin: 30px 0;
}
.device-list {
  display: flex;
  // gap: 20px;
  flex-wrap: wrap;
  > div {
    width: calc(50% - 20px);
    color: #969696;
    font-size: 26px;
    background: #fff;
    // border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
    padding: 20px 0;

    &:nth-child(2n + 1) {
      margin-right: 30px;
    }
    img {
      width: 200px;
      height: 120px;
      background: #ccc;
      margin-bottom: 20px;
    }
    .name {
      margin-bottom: 8px;
    }
    .code {
      margin-bottom: 10px;
      font-size: 30px;
    }
  }
  .status {
    color: #6a6a6a;
    > .error {
      color: #e55f6a;
    }
  }
  .view {
    color: #000;
    display: flex;
    align-items: center;
    .ri-icon {
      font-size: 20px;
      margin-left: 5px;
    }
  }
}

.use-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  .all-item {
    background: #fffbe0;
    position: relative;
    height: 35px;
    text-align: center;
    .use-item {
      position: absolute;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      &.radius {
        border-radius: 0 12px 12px 0;
      }
    }
    &:nth-child(1) {
      .use-item {
        background: #fedc00;
      }
    }
    &:nth-child(2) {
      .use-item {
        background: #f93c31;
      }
    }
    &:nth-child(3) {
      .use-item {
        background: #8dc936;
      }
    }
    span {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: 24px;
    }
  }
}
</style>
